var strMainDiv = "main";
var strTrashDiv = "trash";

function animateTo(strNav,strFirstElement,strSecondElement)
{
	var divTrash = document.getElementById(strTrashDiv);
	var divMain = document.getElementById(strMainDiv);
	var firstElement = document.getElementById(strFirstElement);
	var secondElement = document.getElementById(strSecondElement);

	divMain.appendChild(secondElement);
	$(firstElement).css({"position":"relative"});
	$(secondElement).css({"position":"relative","left":"0%","top":"0%"});
	
	if(strNav=="toLeft")
	{
		$(secondElement).css("left", "100%");
		$(secondElement).css("top", "-100%");
		$(secondElement).animate({left: "0%"},1000);
		$(firstElement).animate({left: "-100%"},1000, function(){
			divTrash.appendChild(firstElement);
			$(secondElement).css("top","0%");
		});
	}
	else if(strNav=="toRight")
	{
		$(secondElement).css("left", "-100%");
		$(secondElement).css("top", "-100%");
		$(secondElement).animate({left: "0%"},1000);
		$(firstElement).animate({left: "100%"},1000, function(){
			divTrash.appendChild(firstElement);
			$(secondElement).css("top","0%");
		});
	}
	else if(strNav=="toTop")
	{
		$(secondElement).css("left", "0%");
		$(secondElement).css("top", "0%");
		$(secondElement).animate({top: "-100%"},1000);
		$(firstElement).animate({top: "-100%"},1000, function(){
			divTrash.appendChild(firstElement);
			$(secondElement).css("top","0%");
		});
	}
	else if(strNav=="toBottom")
	{
		$(secondElement).css("left", "0%");
		$(secondElement).css("top", "-200%");
		$(secondElement).animate({top: "-100%"},1000);
		$(firstElement).animate({top: "100%"},1000, function(){
			divTrash.appendChild(firstElement);
			$(secondElement).css("top","0%");
		});
	}
}

function split(strNav, strFirstElement, strSecondElement)
{
	var firstElement = document.getElementById(strFirstElement);
	var secondElement = document.getElementById(strSecondElement);
	var divMain = document.getElementById(strMainDiv);
	var divTrash = document.getElementById(strTrashDiv);
	
	divTrash.appendChild(firstElement);
	divMain.appendChild(secondElement);
	$(secondElement).css("z-index","1");
	$(firstElement).css({"position":"relative"});
	$(secondElement).css({"position":"relative","left":"0%","top":"0%"});

	var firstPart = document.createElement("div");
	firstPart.setAttribute("id", "firstPart");
	firstPart.setAttribute("style", "overflow:hidden;position:relative;");
	var secondPart = document.createElement("div");
	secondPart.setAttribute("id", "secondPart");
	secondPart.setAttribute("style", "overflow:hidden;position:relative;");
	divMain.appendChild(firstPart);
	divMain.appendChild(secondPart);
	
	var cc1 = $(firstElement).clone();
	var cc2 = $(firstElement).clone();
	firstPart.appendChild(cc1[0]);
	secondPart.appendChild(cc2[0]);
	
	if(strNav=="side")
	{
		$(firstPart).css({"width":"50%", "height":"100%"});
		$(secondPart).css({"width":"50%", "height":"100%"});
		$(firstPart).css({"left":"0%", "top":"-100%", "z-index":"2"});
		$(secondPart).css({"left":"50%", "top":"-200%", "z-index":"2"});
		$(cc1).css({"left":"0%", "position":"relative"});
		$(cc2).css({"left":"-100%", "position":"relative"});
		
		$(firstPart).animate({left:"-50%"},1000);
		$(secondPart).animate({left:"100%"},1000, function(){
			divMain.removeChild(firstPart);
			divMain.removeChild(secondPart);
		});
	}
	else if(strNav=="up")
	{
		$(firstPart).css({"width":"100%", "height":"50%"});
		$(secondPart).css({"width":"100%", "height":"50%"});
		$(firstPart).css({"left":"0%", "top":"-100%", "z-index":"2"});
		$(secondPart).css({"left":"0%", "top":"-100%", "z-index":"2"});
		$(cc1).css({"left":"0%", "position":"relative"});
		$(cc2).css({"top":"-100%", "position":"relative"});

		$(firstPart).animate({top:"-150%"},1000);
		$(secondPart).animate({top:"-50%"},1000, function(){
			divMain.removeChild(firstPart);
			divMain.removeChild(secondPart);
		});
	}
}
